<template>
  <div class="apply">
    <div class="wrap">
      <span class="ap">创建申请</span>
      <button class="comm">提交</button>
      <p class="one">
        <span>主人名 :&emsp;</span> <input type="" class="hname" />
        <span class="t">联系电话 :&emsp;</span> <input type="" class="phone" />
      </p>
      <p class="one">
        <span>宠物名 :&emsp;</span> <input type="" class="hname" />
        <span class="t">品种 :&emsp;&emsp;&emsp;&emsp;&emsp;</span>
        <el-select v-model="value" placeholder="请选择品种">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p class="one">
        <span>疫苗种类 :&emsp;</span>
        <el-select v-model="value2" placeholder="选择疫苗种类">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="t">预约医院 :&emsp;</span>
        <el-select  v-model="value3" placeholder="选择医院">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click="fn(item)"
          >
          </el-option>
          
        </el-select>
        <el-dialog v-model="dialogFormVisible" title="木一医院">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="时间" />
              <el-table-column prop="amount1" label="星期一" />
              <el-table-column prop="amount1" label="星期二" />
              <el-table-column prop="amount2" label="星期三" />
              <el-table-column prop="amount3" label="星期四" />
              <el-table-column prop="amount1" label="星期五" />
              <el-table-column prop="amount2" label="星期六" />
              <el-table-column prop="amount3" label="星期日" />
              <!-- <el-table-column label="Date" width="40" /> -->
            </el-table>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">确定</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >取消</el-button
                >
              </span>
            </template>
          </el-dialog>
      </p>
      <p class="one">
        <span>预约时间 :&emsp;</span>
        <el-date-picker
          v-model="value4"
          type="datetime"
          placeholder="选择日期和时间"
          :default-time="defaultTime"
        >
        </el-date-picker>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      dialogTableVisible: false,
      dialogFormVisible: false,
      disabledDate(time: any) {
return time.getTime() > Date.now();
},
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    });
    const fn = (a: any): any => {
      state.dialogTableVisible = true;
      state.dialogFormVisible = true;
    };
    return {
      fn,
      options1: ref([
        {
          value: "option1",
          label: "边牧",
        },
        {
          value: "option2",
          label: "边牧",
        },
        {
          value: "option3",
          label: "比熊",
        },
      ]),
      options2: ref([
        {
          value: "option1",
          label: "狂犬疫苗",
        },
        {
          value: "option2",
          label: "狂犬疫苗",
        },
      ]),
      options3: ref([
        {
          value: "option1",
          label: "木一医院",
        },
        {
          value: "option2",
          label: "宏泰宠物医院",
        },

      ]),
      value: ref(""),
      value2: ref(""),
      value3: ref(""),
      value4: ref(""),
      ...toRefs(state),
      tableData: [
        { date: "上午", amount1: "已经约满" },
        {
          date: "中午",
          amount1: "",
          amount2: "已经约满",
          amount3: "",
        },
        { date: "晚上", amount2: "预约" },
      ],
    };
  },
});
</script>

<style lang="less" scoped>
.apply {
  background-color: white;
  height: 983px;
}
.wrap {
  margin-left: 27px;
  overflow: hidden;
}
.ap {
  display: inline-block;
  width: 86px;
  height: 21px;
  font-size: 20px;
  margin-top: 40px;
  //   margin-left: 27px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #252631;
}
.comm {
  margin-left: 900px;
  width: 90px;
  height: 37px;
  background: #5473e8;
  border: 1px solid #409eff;
  border-radius: 4px;
}
.hname {
  width: 300px;
  height: 47px;
  border: 1px solid #e9ecf7;
  border-radius: 10px;
}
.t {
  display: inline-block;
  margin-left: 50px;
}
.one {
  margin-left: 50px;
  margin-bottom: 36px;
}
.phone {
  width: 300px;
  height: 47px;
  border: 1px solid #e9ecf7;
  border-radius: 10px;
}
#specries {
  width: 100px;
}
</style>
